<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- <p class="p" ref="abc">123123</p> -->
    <div id="app">
        <p class="p" ref="p">{{count}}</p>
        <p><button @click="count++">count++</button></p>
    </div>
</body>
<script>
    // 在Vue中,有时也需要获取元素/组件(vue),  原生方法 => 基本上都是通过文档获取元素(范围可能不准确), Vue中就定义自己查找元素的方法(基于 ref属性) => 可以理解为在Vue实例初始化渲染过程中,将包含ref属性的元素提取出来 对应ref名放到Vue实例$refs对象中 (优点,只在对应Vue实例范围内查找)
    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
        },
        watch: {
            count:async function (newVal, oldVal) {
                console.log("监听count发生改变", newVal, oldVal);

                // 向查看数据改变之后 => 对应元素的内容是否立即发生改变

                // 原生方法 => 基本上都是通过文档获取元素(查找返回的元素可能并不是挂载的元素内的 -> 可能有误差)
                // var p = document.getElementsByClassName("p")[0];
                // console.log(p);

                // 注意: 数据虽然发生了改变, 后续还需将模板编译为虚拟dom, 通过diff算法比较之后,求出最优解 => 更新到真实dom(页面)上  (异步操作 -> 微任务)  => 
                // 所以虽然数据发生了改变, 但是视图还未更新  dom中内容还是原本的内容
                // console.log(this.$refs.p.textContent);

                // 怎么解决? => 可以等虚拟dom编译为真实dom(视图更新之后再查看元素的内容)

                // 1. 设置延时器 (宏任务 )
                // setTimeout(()=>{
                //     console.log(this.$refs.p.textContent);
                // },0)

                // 2. 官方给Vue实例提供了方法  this.$nextTick()
                // a. this.$nextTick() 可以接收一个回调函数,等虚拟dom编译为真实dom(视图更新之后执行)
                // this.$nextTick(()=>{
                //     console.log(this.$refs.p.textContent);
                // })

                // b. this.$nextTick() 不接受任何参数,默认返回 pending状态的Promise实例, 该Promise实例在虚拟dom编译为真实dom => 视图更新之后变为fulfilled状态
                // this.$nextTick().then(res=>{
                //     console.log(this.$refs.p.textContent);
                // })

                 await this.$nextTick();
                console.log(this.$refs.p.textContent);
            


            }
        },
        mounted() {
            console.log("vue实例", this);
            console.log("vue.$refs", this.$refs);
            console.log("p", this.$refs.p);
        },
    })


</script>

</html>